import Render from './index.rjs';
import { getSystemInfo } from '@ray-js/api';
//js 文件是组件层，负责组件状态管理和业务逻辑
// 提示框位置枚举定义
const ETipRectPosition = {
  LEFT: 'LEFT',
  RIGHT: 'RIGHT',
};

// eslint-disable-next-line no-undef
Component({
  // 组件属性定义
  properties: {
    canvasId: String, // Canvas元素的ID
    hideThumb: {
      type: Boolean,
      value: false, // 是否隐藏滑块
    },
    containerStyle: {
      type: String,
      value: 'position: relative;', // 容器默认样式
    },
    radius: {
      type: Number,
      value: 100, // 圆环外半径
    },
    colorList: {
      type: Array,
      value: [], // 颜色列表，用于绘制渐变色环
    },
    innerRingRadius: {
      type: Number,
      value: 50, // 圆环内半径
    },
    value: {
      type: Number,
      value: 0, // 当前值（0-1000范围）
    },
    // 是否启用事件通道
    useEventChannel: {
      type: Boolean,
      value: false,
    },
    eventChannelName: {
      type: String,
      value: 'lampCirclePickerEventChannel', // 事件通道名称
    },
    lineCap: {
      type: String,
      value: 'round', // 线条端点样式
    },
    touchCircleStrokeStyle: String, // 触摸圆圈描边样式
    touchCircleLineWidth: Number, // 触摸圆圈线宽
    onTouchStart: Function, // 触摸开始回调
    onTouchMove: Function, // 触摸移动回调
    onTouchEnd: Function, // 触摸结束回调
  },

  // 组件内部数据
  data: {
    render: null, // 渲染器实例
    isTouch: false, // 是否正在触摸
    touchType: '', // 触摸类型
    colorText: '', // 颜色文本
    tipRectPosition: ETipRectPosition.LEFT, // 提示框位置
  },
  // 数据监听器
  observers: {
    // 监听value值变化，.**：深层内部属性值变化时都执行，假如value是个对象的时候，内部属性值变化，这里就会监听到
    'value.**'(v) {
      console.log('value-属性值变化', v);
      // 如果正在移动中，则不处理
      if (this.touchType === 'move') {
        return;
      }
      // 当值变化超过一定范围或都为0时，更新位置
      if (Math.abs(this.lastValue / 10 - v / 10) > 1 || (this.lastValue === 0 && v === 0)) {
        this._updatePosByRgb(v);
        this.lastValue = v;
      }
    },
    
    'hideThumb.**'(hideThumb) {
      console.log('hideThumb-属性值变化', hideThumb);
      if (typeof this.lastValue !== 'undefined' && this.lastValue !== null) {
        console.log('hideThumb-属性值变化-执行', this.lastValue);
        this.lastValue = -1; // 给它一个负数-1，让其可以跳过反复渲染的拦截
        this.initCanvas();
      }
    },
  },
  // 组件生命周期
  lifetimes: {
    // 组件实例进入页面节点树时执行
    attached() {
      // 初始化渲染器
      this.render = new Render(this);
      const { radius, innerRingRadius } = this.data;
      // 设置圆环参数
      this.render._setCircles(radius, innerRingRadius);
    },
    // 在组件在视图层布局完成后执行
    ready() {
      const { canvasId } = this.data;
      // 初始化Canvas
      this.initCanvas();
      // 延迟再次初始化确保渲染完成
      this.timer = setTimeout(() => {
        this.initCanvas();
        this.render?.checkIsRender(canvasId);
      }, 300);
    },
    // 组件实例被从页面节点树移除时执行
    detached() {
      // 清理定时器
      clearTimeout(this.timer);
      this.timer = null;
    },
  },
  // 组件方法
  methods: {
    // 获取Canvas实例
    getCanvas(canvas) {
      // 如果Canvas为空对象，重新初始化
      if (JSON.stringify(canvas) === '{}') {
        this.initCanvas();
      }
    },
    // 初始化Canvas
    initCanvas() {
      // 解构组件属性
      const {
        canvasId,
        radius,
        innerRingRadius,
        value = 0,
        hideThumb = false,
        useEventChannel,
        eventChannelName,
        colorList,
        lineCap = 'round',
        touchCircleStrokeStyle = '',
        touchCircleLineWidth = 0,
      } = this.data;
      // 构建渲染选项
      const options = {
        useEventChannel,
        eventChannelName,
        hideThumb,
        lineCap,
        colorList,
        touchCircleStrokeStyle,
        touchCircleLineWidth,
      };
      // 防止重复渲染
      if (this.lastValue === value) {
        console.log('initCanvas-防止重复渲染', value);
        return;
      }
      console.log('initCanvas-防止重复渲染-跳过', value,'hideThumb:'+hideThumb);
      // 执行渲染
      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, value, options);
      this.lastValue = value;
      
    },
    // Canvas初始化完成回调
    initedCanvas() {
      const { value } = this.data;
      // 如果有值，则更新位置
      value !== undefined && this._updatePosByRgb(value);
    },
    // 根据值更新位置
    _updatePosByRgb(value) {
      if (value === undefined) {
        return;
      }
      // 调用渲染器方法更新角度位置
      this.render?._getAnglePositionByValue(value);
    },
    // 根据坐标获取RGB值
    _getRgb(x, y) {
      // 调用渲染器方法获取环形图像数据
      this.render?.getAnnulusImageData(x, y);
    },
    // 处理获取到的环形图像数据
    _getAnnulusImageData(dataRes) {
      const { position, touchType } = dataRes;
      // 记录触摸类型
      this.touchType = touchType;
      // 根据角度位置计算长度值
      const result = this._getLengthByAnglePosition(position.x, position.y);
      this.lastValue = result;
      // 触发事件
      this.triggerEvent(touchType, result);
    },

    
    // 根据角度位置计算长度值（0-100范围）
    _getLengthByAnglePosition(x, y) {
      const { radius } = this.data;
      // 计算弧度
      var radian = Math.atan2(y - radius, x - radius); // 弧度
      // 转换为角度
      var angle = radian * (180 / Math.PI); // 角度
      let angleData = 0;
      // 根据角度计算对应的位置值
      if (+angle > 135 && +angle <= 180) {
        angleData = angle - 135;
      } else if (angle > -180 && angle <= 0) {
        angleData = 45 + angle + 180;
      } else if (angle > 0 && angle <= 45) {
        angleData = 225 + angle;
      }
      // 将角度转换为0-100范围的值
      const result = Math.round((angleData / 270) * 100);
      return result;
    },
  },
});
